﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Visifire Test Page</title>
    <script type="text/javascript" src="Visifire2.js"></script>
</head>
    
<body>

    <div id="VisifireChart0" >

        <script type="text/javascript">

            // Create Visifire object
            var vChart = new Visifire2('ClientBin/SL.Visifire.Charts.xap', "MyChart", 500, 300);

            // vChart1.setLogLevel(0); // If you want to disable logging.

            var chartXml = '<vc:Chart xmlns:vc="clr-namespace:Visifire.Charts;assembly=SLVisifire.Charts" Width="500" Height="300" Theme="Theme1" AnimationEnabled="True" BorderThickness="2" Background="White" Bevel="True" BorderBrush="Black" View3D="False">'
               + '     <vc:Chart.Titles>'
               + '         <vc:Title Text="Athens 2004 Olympics" FontSize="14" Cursor="Hand"/>'
               + '     </vc:Chart.Titles>'
               + '     <vc:Chart.Series>'
               + '         <vc:DataSeries RenderAs="Column" LabelEnabled="True">'
               + '             <vc:DataSeries.DataPoints>'
               + '                 <vc:DataPoint AxisXLabel="USA" YValue="35"/>'
               + '                 <vc:DataPoint AxisXLabel="China" YValue="32"/>'
               + '                 <vc:DataPoint AxisXLabel="Russia" YValue="27"/>'
               + '                 <vc:DataPoint AxisXLabel="Australia" YValue="17"/>'
               + '                 <vc:DataPoint AxisXLabel="Japan" YValue="16"/>'
               + '             </vc:DataSeries.DataPoints>'
               + '         </vc:DataSeries>'
               + '     </vc:Chart.Series>'
               + ' </vc:Chart>';
                
            // Set Chart XML
            vChart.setDataXml(chartXml);
            
            /* 
                On preload event, array of charts is received as event arguments.  
                Events can be can attached to chart elements. And required customization can be done here.
            */
            vChart.preLoad = function(args) {

                //debugger;
                var chart = args[0];   // Chart reference.
                                
                /*  
                Attach an event handler with 1st DataSeries of the 1st chart on MouseLeftButtonUp event.
                DataPoint reference is received as event argument.
                */
                chart.Series[0].MouseLeftButtonUp = function(dataPoint) {
                    alert("AxisXLabel =" + dataPoint.AxisXLabel + " YValue = " + dataPoint.YValue);
                };

                // Attach Events to a Title. Title reference is received as event argument.
                chart.Titles[0].MouseLeftButtonUp = function(title) {
                alert(title.Text);
                }
            }
            
            // Render chart
            vChart.render("VisifireChart0");

        </script>
        
    </div>
</body>

</html>
